<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=1920" />
<style type="text/css">

body {
    background: transparent;
    width: 1920px;
    height: 1280px;
    overflow: hidden;   
}


.channelinfo {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 200px;
    height: 115px;
    overflow: hidden;
    text-align: center;
    font-size: 1px;
    padding: 5px 10px;
    background: blue;
    color: white;
    opacity: 0.8;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px white;
}

.channo {
    font-size: 70px;
}
.channame {
    font-size: 30px;
}
</style>
</head>
<body>
<div  class="channelinfo">
    <div id="channelno" class="channo"></div>
    <div id="channame" class="channame"></div>
</div>
</body>
</html>
<script type="text/javascript">
function NumberPanel() {
    this.init = function() {
        if ( !! this.messager ) return;
        if ( typeof(wae) == "undefined" ) {
            return setTimeout( this.init.bind(this), 500 );
        }

        this.messager = wae.create("WAE.WindowMessager");
        this.messager.setName( "number" );
        this.messager.onsettext = (function(arg) {
            var parameters = arg.arguments[0];
            var showinfo = JSON.parse(parameters);
            if ( showinfo == null ) return;
            var num = showinfo.num;
            if ( this.num == num ) return;
            this.num = num;
            document.getElementById("channelno").innerHTML = this.num;
            var name = showinfo.name;
            document.getElementById("channame").innerHTML = name;
        }).bind(this);
    }


}
var numberobj = new NumberPanel();
numberobj.init();

</script>


